//注册
<template>
    <div class="fanzhuan_con">
        <div class="fanzhuan_flip" style="width:100%">
            <b-row class="r-wapper " style="margin:0;" >
                <div style="margin:-1rem auto">
                <!-- 手机注册 -->
                    <div class="fanzhuankuang" >
                        <b-col class="wapperr fanzhuan_zi1" v-if="isActive==0">
                            <div class="dxy_ysj" >
                                <div class="dxy_ysj_1"></div>
                              <!--   <div class="dxy_ysj_2">邮箱注册</div>-->
                                <div class="dxy_ysj_3"></div>
                            </div>
                            <div class="reg-type-wapper">
                                <!-- <div @click="regTypeChange(0)" :class="{active:0==isActive}">手机注册</div>
                            <div @click="regTypeChange(1)" :class="{active:1==isActive}">邮箱注册</div> -->
                                <div class="active" >{{$t("r_yhzc")}}</div>
                            
                            </div>

                            <!-- <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <img src="../../assets/img/icon-user-reg.png" alt="">
                                    </b-input-group-addon>
                                    <b-form-input v-model="nickName" :placeholder="$t('r_qsryhnc')"></b-form-input>
                                </b-input-group>
                            </div> -->

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        手机号码
                                        <!-- <img src="../../assets/img/icon-phone.png" alt="">-->
                                    </b-input-group-addon> 
                                
                                    <b-form-input v-model="mobile" :placeholder="$t('r_qsrsjh')" style="font-size: 12px;border:none;border-bottom:2px solid #c3cde4;width:100%;background-color:transparent;outline:none!important;    box-shadow: none;"></b-form-input>
                                </b-input-group>
                                <div class="tips-line" v-if="existsPhone" :style="{color:'red'}">{{$t('r_gsjhyzc')}}</div>
                            </div>

                            <!-- <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <img src="../../assets/img/icon-email.png" alt="">
                                    </b-input-group-addon>
                                    <b-form-input v-model="email" :placeholder="$t('r_qsryxdz')"></b-form-input>
                                </b-input-group>
                                <div class="tips-line" v-if="existsEmail" :style="{color:'red'}">{{$t('r_gyxyzc')}}</div>
                            </div> -->
<!--
                            <div class="form-tab" v-if="false">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <!- <img src="../../assets/img/icon-imgcode.png" alt=""> 
                                        短信验证码
                                    </b-input-group-addon>
                                    <b-form-input v-model="imgCode" :placeholder="$t('r_qsrtxyzm')" 
                                    style="border:none;background-color:transparent;boreder-bottom:2px solid #c3cde4;width:100%;outline:none!important;  font-size: 12px;  box-shadow: none;"></b-form-input>
                                </b-input-group>
                                <div class="img-code" @click="getImgUrl">
                                    <img :src="imgUrl" alt="">
                                </div>
                            </div> -->

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        短信验证码
                                      <!--   <img src="../../assets/img/icon-phonecode.png" alt="">  -->
                                   </b-input-group-addon>
                                   <b-form-input v-model="mgsCode" :placeholder="$t('r_qsryzm')" style="border:none;border-radius:0; background-color:transparent;border-bottom:2px solid #c3cde4;width:100%; font-size: 12px;   box-shadow: none;"></b-form-input>
                               </b-input-group>
                               <div class="code-right" style="position: absolute;right: -40px;top: 53px; z-index: 100;">
                                   <button variant="outline-secondary" @click="currentGetPhoneCode" :disabled="ifDisabled" style="color:#3B63BF; font-size: 12px;border:none;background-color:transparent;cursor:pointer;  box-shadow: none; ">{{btnText}}</button>
                               </div>
                           </div>

                           <div class="form-tab">
                               <b-input-group>
                                   <b-input-group-addon class="input-icon">
                                       登录密码
                                     <!-- <img src="../../assets/img/icon-pwd.png" alt=""> -->
                                 </b-input-group-addon>
                                 <b-form-input type="password" v-model="password_1" :placeholder="$t('r_qsrdlmm')" style="border:none;width:100%;background-color:transparent;font-size: 12px;border-bottom:2px solid #c3cde4!important;margin:0！important;"></b-form-input>
                             </b-input-group>
                         </div>

                          <div class="form-tab">
                             <b-input-group>
                                 <b-input-group-addon class="input-icon">
                                   再次输入登录密码
                                     <!-- <img src="../../assets/img/icon-pwd.png" alt=""> -->
                                    </b-input-group-addon>
                                    <b-form-input type="password" v-model="password_2" :placeholder="$t('r_qcxsrdlmm')" style="border:none;width:100%;background-color:transparent;font-size: 12px;border-bottom:2px solid #c3cde4!important;margin:0！important;"></b-form-input>
                                </b-input-group>
                            </div>

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <!-- <img src="../../assets/img/icon-phonecode.png" alt=""> -->
                                        <button class=" btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"  aria-expanded="false" 
                                        style="border: none;padding-left:0!important; cursor: pointer;font-size: 12px;color: #3B63BF;"
                                        @click="dianji()">推荐人（选填）</button>
                                        <!-- 推荐人（选填）<span></span> -->
                                    </b-input-group-addon>
                                    <b-form-input  v-if="chuan == '1'"  class="dianjishijian"  v-model="inviteId" :placeholder="$t('r_qsryqm')" style="font-size: 12px;border:none;width:100%;background-color:transparent;border-bottom:2px solid #c3cde4!important;">
                                    </b-form-input>
                                    </b-input-group>
                            </div>

                            <div class="form-tab" style="margin-top:-15px">
                                <b-form-checkbox v-model="ifread" value="accepted">
                                    <span style="line-height:24px; border-radius: 50%;font-family: PingFangSC-Medium;font-size: 10px;color: #3B63BF;letter-spacing: 0;">{{$t('r_wyydbty')}}<div @click="gotoRouter(2)" class="yonghuxieyi" style="    display: inline-block;"> 《{{$t('r_yhxy')}}》</div></span>
                                </b-form-checkbox>
                            </div>

                            <div class="form-tab">
                                <button :disabled="regOne" @click="userReg" class="form-tab-btn" variant="success" style="border：0">{{$t('lijizhuce')}}</button>
                            </div>

                        </b-col>


                        <!-- 邮箱注册 -->
                        <b-col class="wapperr fanzhuan_zi2" v-if="isActive==1">
                            <div class="dxy_ysj"  >
                                    <div class="dxy_ysj_1"></div>
                                    <div class="dxy_ysj_2">手机注册</div>
                                    <div class="dxy_ysj_3"></div>
                                </div>
                            <div class="reg-type-wapper">
                                <!-- <div @click="regTypeChange(0)" :class="{active:0==isActive}">手机注册</div>
                            <div @click="regTypeChange(1)" :class="{active:1==isActive}">邮箱注册</div> -->
                                <div class="active">{{$t("r_yhzc")}}</div>
                            
                            </div>

                            <!-- <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <img src="../../assets/img/icon-user-reg.png" alt="">
                                    </b-input-group-addon>
                                    <b-form-input v-model="nickName" :placeholder="$t('r_qsryhnc')"></b-form-input>
                                </b-input-group>
                            </div> -->

                            <!-- <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        邮箱
                                        <!- <img src="../../assets/img/icon-phone.png" alt=""> 
                                    </b-input-group-addon> 
                                
                                    <b-form-input v-model="mobile" :placeholder="$t('r_qsrsjh')" style="border:none;border-bottom:2px solid #c3cde4;width:100%;background-color:transparent;outline:none!important;"></b-form-input>
                                </b-input-group>
                                <div class="tips-line" v-if="existsPhone" :style="{color:'red'}">{{$t('r_gsjhyzc')}}</div>
                            </div> -->

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <!-- <img src="../../assets/img/icon-email.png" alt="">
                                        邮箱注册-->
                                    </b-input-group-addon>
                                    <b-form-input v-model="emaill" :placeholder="$t('r_qsryxdz')" style="border:none; font-size: 12px;border-bottom:2px solid #c3cde4;width:100%;background-color:transparent;outline:none!important;" ></b-form-input>
                                </b-input-group>
                                <div class="tips-line" v-if="existsEmail" :style="{color:'red'}">{{$t('r_gyxyzc')}}</div>
                            </div>

                            <!-- <div class="form-tab" v-if="false">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <! <img src="../../assets/img/icon-imgcode.png" alt=""> 
                                        短信验证码
                                    </b-input-group-addon>
                                    <b-form-input v-model="imgCode" :placeholder="$t('r_qsrtxyzm')" 
                                    style="border:none;background-color:transparent;boreder-bottom:2px solid #c3cde4;width:100%;outline:none!important;"></b-form-input>
                                </b-input-group>
                                <div class="img-code" @click="getImgUrl">
                                    <img :src="imgUrl" alt="">
                                </div>
                            </div> -->

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        邮箱验证码
                                        <!-- <img src="../../assets/img/icon-phonecode.png" alt=""> -->
                                    </b-input-group-addon>
                                    <b-form-input v-model="mobilell" :placeholder="$t('r_qsryzm')" style="font-size: 12px;border:none;border-radius:0; background-color:transparent;border-bottom:2px solid #c3cde4;width:100%;"></b-form-input>
                                </b-input-group>
                                <div class="code-right" style="position: absolute;right: -40px;top: 53px; z-index: 100; ">
                                    <button variant="outline-secondary" @click="currentGetEmailCode()" :disabled="ifDisabled" style="font-size: 12px;color:#3B63BF; border:none;background-color:transparent;cursor:pointer;">{{btnText}}</button>
                                </div>
                            </div>

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        登录密码
                                        <!-- <img src="../../assets/img/icon-pwd.png" alt=""> -->
                                    </b-input-group-addon>
                                    <b-form-input type="password" v-model="password_1ll" :placeholder="$t('r_qsrdlmm')" style="font-size: 12px;border:none;width:100%;background-color:transparent;border-bottom:2px solid #c3cde4!important;"></b-form-input>
                                </b-input-group>
                            </div>

                            <!-- <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <img src="../../assets/img/icon-pwd.png" alt="">
                                    </b-input-group-addon>
                                    <b-form-input type="password" v-model="password_2" :placeholder="$t('r_qcxsrdlmm')"></b-form-input>
                                </b-input-group>
                            </div> -->

                            <div class="form-tab">
                                <b-input-group>
                                    <b-input-group-addon class="input-icon">
                                        <!-- <img src="../../assets/img/icon-phonecode.png" alt=""> -->
                                        <button class=" btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"  aria-expanded="false" 
                                        style="box-shadow: 0; border: none;padding-left:0!important;font-size: 12px; cursor: pointer;color:#3B63BF;font-size: 12px;; "
                                        @click="dianji()">推荐人（选填）</button>
                                        <!-- 推荐人（选填）<span></span> -->
                                    </b-input-group-addon>
                                    <b-form-input  v-if="chuan==1"  class="dianjishijian" v-model="inviteId_ll" :placeholder="$t('r_qsryqm')" style="border:none;width:100%;background-color:transparent;border-bottom:2px solid #c3cde4!important; font-size: 12px;">
    
                                    </b-form-input>
                                    </b-input-group>
                            </div>

                            <div class="form-tab" style="margin-top:-15px;">
                                <b-form-checkbox v-model="ifreade" value="accepted">
                                    <span style="line-height:24px; border-radius: 50%;font-family: PingFangSC-Medium;font-size: 10px;color: #3B63BF;letter-spacing: 0;">{{$t('r_wyydbty')}}<div @click="gotoRouter(2)"  class="yonghuxieyi" style="display: inline-block;"> 《{{$t('r_yhxy')}}》</div></span>
                                </b-form-checkbox>
                            </div>

                            <div class="form-tab">
                                <button :disabled="regOne" @click="userRegall()" class="form-tab-btn" style="border：0" variant="success">{{$t('lijizhuce')}}</button>
                            </div>

                        </b-col>
                    </div>
                    <div class="illustration"   >
                        <img   src="./../../assets/img/zhu_ce_chahua.png" alt="">
                    </div>
                </div>
            </b-row>
            
        </div>
    </div>
</template>

<script>
import { isPhoneNum, isEmail } from "../../assets/js/common";
import mixins from "../../assets/js/mixin";
import { mapState} from "vuex";
export default {
    mixins: [mixins],
    data() {
        return {
            msg: "注册",
            ifread: "read",
            ifreade: "read",
            isActive: 0, // 0：手机   1：邮箱

            phone: null,
            ifDisabled: false,
            btnText: this.$t('r_hqyzm'),
            timer: null,

            // 表单数据手机
            loginType: "mobile",
            nickName: "",
            email: "",
            mobile: "",
            password_1: "",
            password_2: "",
            mgsCode: "", // 用户输入验证码
            imgCode: "",
            inviteId: "", // 邀请码

            imgUrl: "",
            // 表单数据邮箱
            emaill: "",
            mobilell: "",
            password_1ll: "",
            inviteId_ll: "",// 邀请码


            regOne: false,

            existsPhone: false,
            existsEmail: false,
            chuan:0
        };
    },
    methods: {
        gotoRouter(a){
        this.$router.push({
             path: '/news',
             query:{
                code:a
            }
            });
    },
   
        dianji(){
           if(this.chuan == 0){
               this.chuan=1
            
           }else if(this.chuan==1){
                this.chuan=0
           }
           
        },
        regValueInit() {
            this.nickName = "";
            this.email = "";
            this.mobile = "";
            this.password_1 = "";
            this.password_2 = "";
            this.mgsCode = ""; // 用户输入验证码
            this.imgCode = "";
            this.inviteCode = ""; // 邀请码 
        },
        regTypeChanged(){    
            //手机注册和邮箱注册的切换      
            if(this.isActive == 0){
                this.isActive = 1;
            }else if(this.isActive == 1){
                this.isActive = 0
            }
        },
        regTypeChange(i) {
            this.isActive = i;
            this.regValueInit();
            if (i == 1) {
                this.getImgUrl();
                this.loginType = 'email';
            } else {
                this.loginType = 'mobile';
            }
        },
        // getImgUrl() {
        //     //获取图片验证码
        //     this.$http.get("/nb-web/api/system/image/code").then(res => {
        //         if (res.data.code == "001") {
        //             this.imgUrl = "data:img/jpg;base64," + res.data.result.imgCode;
        //         }
        //     });
        // },
        currentGetPhoneCode() {
            // 获取短信验证码
            if (this.mobile == "") {
                // 請填寫手機號
                this.$swal(this.$t('r_qtxsjh'),{
						icon:'/static/img/tan_chuang.png'
					});
                return false;
            }
            if (!isPhoneNum(this.mobile)) {
                // 請填寫正確的邮箱
                this.$swal(this.$t('r_qtxzqdsjh'),{
						icon:'/static/img/tan_chuang.png'
					});
                return false;
            }
            if (this.existsPhone) {
                // 該手機號碼已經註冊
                this.$swal(this.$t('r_gsjhyjzc'),{
						icon:'/static/img/tan_chuang.png'
					});
                return false;
            }
            this.getPhoneCode(this.mobile).then(res => {
                if (res.data.code == "001") {
                    this.countdown();
                }
            });
        },
        currentGetEmailCode() {
           // 获取邮箱验证码
         
            if (this.emaill == "") {
                // 請填寫手機號
                this.$swal(this.$t('r_qtxyx'),{
					icon:'/static/img/tan_chuang.png'
				});
                return false;
            }
            // if (!isPhoneNum(this.emaill)) {
            //     // 請填寫正確的手機號
            //     this.$swal(this.$t('r_qtxzqdyx'));
            //     return false;
            // }
            if (this.existsEmail) {
                // 該手機號碼已經註冊
                this.$swal(this.$t('r_gsjhyjzc'),{
					icon:'/static/img/tan_chuang.png'
				});
                return false;
            }
            this.getemailCode(this.emaill).then(res => {

                if (res.data.code == "001") {
                    this.countdown();
                }
            });
        },
        phoneRegTesting() {
            //手机注册 数据校验
            // if (this.nickName == '') {
            //     // 用户昵称不能为空
            //     this.$swal(this.$t('r_yhncbnwk'))
            //     return false;
            // }
            if (this.mobile == '') {
                this.$swal(this.$t('r_sjhmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (!isPhoneNum(this.mobile)) {
                this.$swal(this.$t('r_sjhmgsbzq'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (this.email != "") {
                if (!isEmail(this.email)) {
                    this.$swal(this.$t('r_yxgsbzq'),{
					icon:'/static/img/tan_chuang.png'
				})
                    return false;
                }
                if (this.existsEmail) {
                    this.$swal(this.$t('r_gyxyzc'),{
					icon:'/static/img/tan_chuang.png'
				})
                    return false;
                }
            }
            if (this.mgsCode == '') {
                this.$swal(this.$t('r_yzmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (!this.passwordTesting()) {
                return false;
            }
            if (this.ifread != 'accepted') {
                this.$swal(this.$t('r_qydxy'),{
					icon:'/static/img/tan_chuang.png'
				});
                return false;
            }
            return true;
        },
        passwordTesting() {
            if (this.password_1 == '') {
                this.$swal(this.$t('r_mmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.password_1)) {
                //'密码6-16位,包含数字，字母'
                this.$swal(this.$t('r_mmbhszdxx'),{
					icon:'/static/img/tan_chuang.png'
				});
                return false;
            }
            if (this.password_1 != this.password_2) {
                this.$swal(this.$t('r_cfsrdmmbyz'))
                return false;
            }
            return true;
        },
        userReg() {
            //用户手机注册
          console.log("手机注册!!");
            if (!this.phoneRegTesting()) {
                return false;
            }
            this.regOne = true;
            this.getPublicKey().then(key => {
                let encrypt = this.$JSEncrypt;
                encrypt.setPublicKey(key);
                this.$http.post('/nb-web/api/user/register', {
                    nickName: this.nickName,
                    mobile: this.mobile,
                    email: this.email,
                    imgCode: this.imgCode,
                    mgsCode: this.mgsCode,
                    password: encrypt.encrypt(this.password_1),
                    inviteCode: this.inviteId,
                }).then(res => {
                    this.regOne = false;
                    if (res.data.code == '001') {
                        this.$swal({
                            title: "",
                            text: "恭喜您！注册成功！请联系客服进行审核！",
                            icon: "/static/img/dagou.png",
                            button: this.$t('r_qdl')
                        }).then(value => {
                            this.gotoRoute('/login');
                            this.regValueInit();
                        })

                    } else {
                        this.$swal("对不起，注册失败！请稍后再注册！",{
					icon:'/static/img/tan_chuang.png'
				})
                    }
                })
            })
        },
        phoneRegTestingall() {
            //邮箱注册 数据校验
            if (this.emaill == '') {
                // 邮箱不能为空
                this.$swal(this.$t('r_yxbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (this.mobilell == '') {
                // 验证码不能为空
                this.$swal(this.$t('r_yzmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            // if (!isPhoneNum(this.dist)) {
            //     this.$swal(this.$t('r_sjhmgsbzq'))
            //     return false;
            // }
            if (this.email != "") {
                if (!isEmail(this.email)) {
                    this.$swal(this.$t('r_yxgsbzq'),{
					icon:'/static/img/tan_chuang.png'
				})
                    return false;
                }
            }
            //     if (this.existsEmail) {
            //         this.$swal(this.$t('r_gyxyzc'))
            //         return false;
            //     }
            // }
            // if (this.mgsCode == '') {
            //     this.$swal(this.$t('r_yzmbnwk'))
            //     return false;
            // }
            if (!this.passwordTestingall()) {
                return false;
            }
            if (this.ifreade != 'accepted') {
                this.$swal(this.$t('r_qydxy'),{
					icon:'/static/img/tan_chuang.png'
				});
                return false;
            }
            return true;
        },
        passwordTestingall() {
            if (this.password_1ll == '') {
                this.$swal(this.$t('r_mmbnwk'),{
					icon:'/static/img/tan_chuang.png'
				})
                return false;
            }
            if (!/^[A-Za-z0-9]\w{5,15}$/.test(this.password_1ll)) {
                //'密码6-16位,包含数字，大小写字母，符号'
                this.$swal(this.$t('r_mmbhszdxx'),{
					icon:'/static/img/tan_chuang.png'
				});
                return false;
            }
            if (this.password_1 != this.password_2) {
                this.$swal(this.$t('r_cfsrdmmbyz'))
                return false;
            }
            return true;
        },
        userRegall() {
            //邮箱注册
            if (!this.phoneRegTestingall()) {
                return false;
            }
            this.regOne = true;
            this.getPublicKey().then(key => {
                let encrypt = this.$JSEncrypt;
                encrypt.setPublicKey(key);
                this.$http.post('/nb-web/api/user/register', {
                    // nickName: this.nickName,
                    // mobile: this.mobile,
                    email: this.emaill,
                    // imgCode: this.imgCode,
                    mgsCode: this.mobilell,
                    password: encrypt.encrypt(this.password_1ll),
                    inviteCode: this.inviteId_ll,
                }).then(res => {
                    this.regOne = false;
                    if (res.data.code == '001') {
                        this.$swal({
                            title: "",
                            text: res.data.msg,
                            icon: "/static/img/dagou.png",
                            button: this.$t('r_qdl')
                        }).then(value => {
                            this.gotoRoute('/login');
                            this.regValueInit();
                        })

                    } else {
                        this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
                    }
                })
            })
        },
     url(){
         let url = window.location.href
             url = url.split('?',2)
             url = url[1].split('=',2)

        if(url[0] == 'invitecode' ){
            this.chuan = 1
            this.inviteId_ll = url[1]
            this.inviteId = url[1]
        }
     }
    },
    created() {
        this.inviteId = this.$route.query.inviteCode || ''
        this.url()
      
    },
 
    watch: {
        mobile(newval) {
            this.existsPhone = false;
            if (isPhoneNum(newval)) {
                this.$http.post('/nb-web/api/user/exists', {
                    account: newval
                }).then(res => {
                    if (res.data.code == '001') {
                        this.existsPhone = true; // 已注册手机号
                    } else {
                        this.existsPhone = false; // 未注册手机号
                    }
                })
            }
        },
       
        // email(newval) {
        //     this.existsEmail = false;
        //     if (isEmail(newval)) {
        //         this.$http.post('/nb-web/api/user/exists', {
        //             account: newval
        //         }).then(res => {
        //             if (res.data.code == '001') {
        //                 this.existsEmail = true; // 已注册手机号
        //             } else {
        //                 this.existsEmail = false; // 未注册手机号
        //             }
        //         })
        //     }
        // },
    },
  
};

</script>

<style lang="scss" scoped>



@import '../../assets/style/common.scss';

/deep/ .custom-control-indicator{
    width:0.8rem;
    height:0.8rem;
}
.xiu {
//   display: none!important;
}
.zhu_ce{
    display: none!important;
}
.deng_lu{
    display: block!important;
}
.input-icon{
    border:none;
    margin-bottom:18px;
    font-family: PingFangSC-Medium;
    font-size:16px;
    color:#1F3F87;
}
input.form-control:focus{
    border-color:#c3cde4;
    outline: none;
    box-shadow: none!important;
}
.container{
    padding:0!important;
}
.r-wapper{
    padding:80px 0!important;
    height:780px;
    background:url('../../assets/img/zhu_ce_ye_bg.png');
 
}
.form-control{
    padding:0!important;
    border-radius:0;
}
.input-group-addon{
    padding:0;
}

    .wapperr{
    position: absolute;
    top:5rem;
    
    left:2rem;
    width:348px!important;
    border-radius:5px;
    background:#e5e5e5!important;
    z-index: 10;
    padding:36px!important;
}

.dxy_ysj{
    position: absolute;
    top: 0;
    right: -1px;
    float: right;
    width: 120px;
    height:48px;
    z-index: 100;
    cursor:pointer;
}
.dxy_ysjj{

}
.dxy_ysj_1{
    position: absolute;
    left:0;
    width:16px;
    height:44px;
    background: url('../../assets/img/images/zhu_ce_ye_03.gif') no-repeat;
}
.dxy_ysj_2{
    position: absolute;
    left:16px;
    width:100px;
    height:44px;
    font-size: 12px;
    line-height: 45px;
    cursor:pointer;
    text-align: center;
    color:#3b63bf;
    background:#d0e0ff;
    font-family: 'PingFangSC-Semibold','Courier New', Courier, monospace
}
.dxy_ysj_3{
    position: absolute;
    right:-12px;
    width:17px;
    height:48px;
    background: url('../../assets/img/images/zhu_ce_ye_05.gif') no-repeat;
}
.illustration{
    
    width:360px;
    height:438px;
    border-radius:5px;
    background:#D8D8D8;
    overflow: hidden;
    margin-left:-320px;
    margin-top: 143px;
    img{
        height:100%;
    }
}

.custom-control-indicator{
border-radius: 50%;
}
.reg-type-wapper {
  display: flex;

  margin-bottom: 20px;
  > div {
    line-height: 42px;
    float: left;
    padding-left: 0;
    font-size: 24px;
    position: relative;
    border-bottom: 2px solid transparent;
    cursor: pointer;
   font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #1F3F87;
    letter-spacing: 0;
    &.active {
   
      color: #1F3F87;
    }
  }
}
input.bottom:focus{
     outline: none!important;
}
input::-webkit-input-placeholder{
            color:#99A7C8!important;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#99A7C8!important;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#99A7C8!important;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#99A7C8!important;
        }
.btn-outline-secondary:hover{
    background: transparent;
    border:none;
    outline:none!important;

    box-shadow:none;
}
.btn-outline-secondary:active{
    background: transparent!important;
    box-shadow:none!important;
}
.dropdown-toggle{
    outline:none!important;
    box-shadow: 0
}
.btn{
    outline:none!important;
}
.fanzhuan_con{
 
}
.fanzhuan_flip{
    position: relative;
   
}
.fanzhuankuang{
    transform-style: preserve-3d;
    transition: all .3s;
    position: relative;
    margin-right:-320px;
    width: 348px;
    z-index: 300;

}
.form-tab .form-tab-btn{
    border:0;
    background-image: linear-gradient(-90deg, #6CA5FF 1%, #5291FF 99%);
    border-radius: 10px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 0;
}

/deep/ .btn-outline-secondary:focus{
     box-shadow:0!important
}

.yonghuxieyi{
    outline: none;
    cursor:pointer;
}
.yonghuxieyi:hover{
    color:#6CA5FF
}
</style>


